#header-parent{
	background: #141414;
	padding: 10px 0 20px;
	color: #fdfdfd;
	h1, h1 a{
		text-transform: uppercase;
		letter-spacing: -2px;
		font-weight: 700;
		color: #fdfdfd;
		// background: -webkit-linear-gradient(#FDFDFD, #E7E7E7);
	 //    -webkit-background-clip: text;
		// -webkit-text-fill-color: transparent;
	}
	.cari{
		margin-top: 22px;
		button{
			padding-left: 20px;
			padding-right: 20px;
			font-weight: 700;
			font-family: @headings-font-family;
			text-transform: uppercase;
			text-shadow: 0 1px 1px rgba(0,0,0,.36);
			letter-spacing: 1px;
		}
		input:focus{
  			outline: none;
		}
	}
}
#navbar-parent{
	#gradient > .vertical(@start-color: #2B2B2B; @end-color: #121212; @start-percent: 0%; @end-percent: 100%);
	&.affix{
		top:0;
		z-index: 9;
		width: 100%;
		.cariButton{
			display: block;
		}
		.navbar-header{
			width: 148px;
			.transition(width 0.4s linear);
		}
	}
}
#main-parent{
	margin-top:50px;
  	background: #333 url('../img/noise.png');
}
#main-wrapper{
	margin-top:-20px;
	background:#f8f8f8;
	.box-shadow(2px -2px 15px rgba(0,0,0,.1));
	min-height: 700px;
}

.top-content{
	margin-left: -15px;
	margin-right: -15px;
	border-bottom: 1px solid #e3e3e3;
	margin-bottom: 0;
	padding: 0;
	position: relative;
	h4{
		position: absolute;
		font-weight: 700;
		font-family: Lato,sans-serif;
		font-size: 14px;
		color: #333;
		left: 385px;
		top: 5px;
	}
	li{
		float: left;
		display: block;
		width: 320px;
		.category, .img{
			display: none;
		}
		.title a{
			-webkit-font-smoothing: antialiased;
			font-size: 12px;
			display: block;
			margin-left: 15px;
			padding: 8px 5px;
			color: #333;
			font-weight: 700;
			font-family: Arial,sans-serif;
			border-bottom: 1px solid #e3e3e3;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			&:hover{
				border-bottom-color: #009bff;
				background: #009bff;
				color: #fff;
			}
		}
		&:first-child{
			position: relative;
			width: 365px;
			height: 316px;
			overflow: hidden;
			.category{
				position: absolute;
				top: 30px;
				left: 30px;
				display: block;
				background: grey;
				color: #fff;
				text-shadow:0 1px 0 darken(grey, 10%);
				padding: 3px 6px;
				font-size: 12px;
				text-transform: uppercase;
				font-family: Lato,sans-serif;
				font-weight: 700;
				z-index: 9;
				&.berita{
					background: @brand-berita;
					text-shadow: 0 1px 0 darken(@brand-berita, 15%);
				}
				&.olahraga{
					background: @brand-olahraga;
					text-shadow: 0 1px 0 darken(@brand-olahraga, 15%);
				}
				&.teknologi{
					background: @brand-teknologi;
					text-shadow: 0 1px 0 darken(@brand-teknologi, 15%);
				}
				&.kesehatan{
					background: @brand-kesehatan;
					text-shadow: 0 1px 0 darken(@brand-kesehatan, 15%);
				}
				&.entertainment{
					background: @brand-entertainment;
					text-shadow: 0 1px 0 darken(@brand-entertainment, 15%);
				}
				&.travel{
					background: @brand-travel;
					text-shadow: 0 1px 0 darken(@brand-travel, 15%);
				}
				&.otomotif{
					background: @brand-otomotif;
					text-shadow: 0 1px 0 darken(@brand-otomotif, 15%);
				}
				&.unik{
					background: @brand-unik;
					text-shadow: 0 1px 0 darken(@brand-unik, 15%);
				}

			}
			.img{
				display: block;
				width: 365px;
				height: 316px;
				background-size: cover !important;
				background-position: center center !important;
			}
			.title{
				position: absolute;
				display: block;
				bottom: 0;
				width: 100%;
				a{
					font-family: @font-family-sans-serif;
					margin: 0;
					border-bottom: 0;
					font-size: 30px;
					line-height: 36px;
					font-weight: 500;
					color: #fff;
					text-shadow: 0 1px 0 rgba(0,0,0,.8);
					padding: 214px 30px 30px;
					overflow: visible;
					white-space: normal;
					#gradient > .vertical(@start-color: rgba(0,0,0,.001); @end-color: rgba(0,0,0,.75); @start-percent: 20%; @end-percent: 100%);
					&:hover{
						background-color: transparent;
					}
				}
			}
		}
		&:nth-child(2){
			margin-top: 45px;
		}
		&:nth-child(9){
			.title a{
				border-bottom: 0;
			}
		}
	}
}
.featured-main{
  	background: #fff url('../img/noise.png');
  	margin: 0 -15px;
  	padding: 0 15px;
	.featuredh{
		margin: -20px -15px 15px;
		background: #f2f2f2;
		padding: 14px 15px;
		overflow: hidden;
		border-bottom: 1px solid #e3e3e3;
		h3{
			margin: 0;
			font-family: Lato,sans-serif;
			text-transform: uppercase;
			font-weight: 700;
			font-size: 14px;
			color: #666;
		}
	}
}
.featured-main{
ul.list-unstyled{
	height: 330px;
	margin-bottom: 30px;
	li{
		display: block;
		width: 100%;
		.category, .img, .img-thumbnail{
			display: none;
		}
		.title a{
			-webkit-font-smoothing: antialiased;
			font-size: 13px;
			line-height: 19px;
			display: block;
			padding: 8px 5px;
			color: #333;
			font-family: Arial,sans-serif;
			border-bottom: 1px solid #e3e3e3;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			&:hover{
				color:  #009bff;
			}
		}
		&:first-child{
			position: relative;
			height: 180px;
			.img-thumbnail{
				display: block;
				.box-shadow(0 0 15px rgba(0,0,0,.15));
			}
			.category{
				position: absolute;
				top: 5px;
				left: 5px;
				display: block;
				background: grey;
				color: #fff;
				text-shadow:0 1px 0 darken(grey, 10%);
				padding: 3px 6px;
				font-size: 12px;
				text-transform: uppercase;
				font-family: Lato,sans-serif;
				font-weight: 700;
				&.berita{
					background: @brand-berita;
					text-shadow: 0 1px 0 darken(@brand-berita, 15%);
				}
				&.olahraga{
					background: @brand-olahraga;
					text-shadow: 0 1px 0 darken(@brand-olahraga, 15%);
				}
				&.teknologi{
					background: @brand-teknologi;
					text-shadow: 0 1px 0 darken(@brand-teknologi, 15%);
				}
				&.kesehatan{
					background: @brand-kesehatan;
					text-shadow: 0 1px 0 darken(@brand-kesehatan, 15%);
				}
				&.entertainment{
					background: @brand-entertainment;
					text-shadow: 0 1px 0 darken(@brand-entertainment, 15%);
				}
				&.travel{
					background: @brand-travel;
					text-shadow: 0 1px 0 darken(@brand-travel, 15%);
				}
				&.otomotif{
					background: @brand-otomotif;
					text-shadow: 0 1px 0 darken(@brand-otomotif, 15%);
				}

			}
			.img{
				display: block;
				width: 310px;
				height: 170px;
				background-size: cover !important;
				background-position: center center !important;
			}
			.title{
				position: absolute;
				display: block;
				bottom: 0;
				width: 310px;
				margin: 0 5px 5px;
				a{
					margin: 0;
					border-bottom: 0;
					font-size: 16px;
					line-height: 22px;
					font-weight: 400;
					color: #fff;
					text-shadow: 0 1px 0 rgba(0,0,0,.8);
					padding: 30px 15px 12px;
					overflow: visible;
					white-space: normal;
					#gradient > .vertical(@start-color: rgba(0,0,0,.001); @end-color: rgba(0,0,0,.85); @start-percent: 0%; @end-percent: 100%);
					&:hover{
						background-color: transparent;
					}
				}
			}
		}
		&:nth-child(2){
			margin-top: 5px;
		}
	}
}
}


#sidebar-wrapper{
	a{
		color: #fff;
		&:hover{
			color: darken(#fff,15%);
		}
	}
	.sidebar{
		.widget{
			margin-left: -(@grid-gutter-width / 2);
			margin-right: -(@grid-gutter-width / 2);
			padding-left: (@grid-gutter-width / 2);
			padding-right: (@grid-gutter-width / 2);
			padding-bottom: 30px;
			h2{
				color:#fff;
				text-align: center;
				text-shadow: 0 1px 1px rgba(0,0,0,.16);
				text-transform: uppercase;
				margin: 0 -(@grid-gutter-width / 2) 15px;
				padding: 13px 0;
				background: rgba(0,0,0,.12);
				font-size: 16px;
				@h2shadow : inset 2px -2px 20px rgba(0,0,0,.14),0 1px 0px rgba(255,255,255,.13);
				.box-shadow(@h2shadow);
			}
		}
		.PopularPosts{
			background: #0050A1 url('../img/noise.png');
			.popular-posts{
				background: #F8F8F8;
				border-radius: 2px;
				ul{
					padding:10px 0 20px;
					margin-bottom: 0;
					list-style: none;
					li{
						padding: 0;
						a{
							color: #333;
							font-weight: 700;
							font-size: 13px;
							padding: 10px 0 7px;
							margin: 0 15px;
							display: block;
							border-bottom: 1px solid #e3e3e3;
							&:hover{
								color: red;
							}
						}
					}
				}
			}
		}
		#HTML1{
			background: #0F9540 url('../img/noise.png');
			padding-bottom: 0;
			ul.list-unstyled{
				margin-bottom: 0;
				li{
					a{
						display: block;
						&:hover{
							color: #f8f8f8;
						}
					}
					margin: 0 -15px 15px;
					padding: 0 15px 15px;
					border-bottom: 1px solid rgba(0,0,0,.14);
					box-shadow: 0 1px 0 rgba(255,255,255,.13);
					.title{
						width: 178px;
						margin-left: 10px;
						font-weight: 700;
						font-size: 13px;
						padding: 5px 0;
						text-shadow:0 1px 0 darken(#0F9540, 15%);
					}
					&:last-child{
						margin-bottom: 0;
					}
				}
			}
		}
		.view-block{
			display: block;
			padding: 10px 0;
			font-weight: bold;
			text-shadow:0 1px 0 darken(#0F9540, 15%);
			&:hover{
				color: #f8f8f8;
			}
		}


		#HTML4{
			padding-bottom: 0;
			ul.list-unstyled{
				margin-bottom: 0;
				li{
					a{
						display: block;
						&:hover{
							color: #f8f8f8;
						}
					}
					.img{
						height: 70px;
						width: 70px;
					}
					.title{
						width: 178px;
						margin-left: 10px;
					}
					&:first-child{
						.img{
							display: block;
							width: 259px;
							height: 140px;
							float: none !important;
						}
						.title{
							margin-top: 10px;
							font-size: 14px;
							float: none !important;
							margin-left: 0;
							width: 100%;
						}
					}
					margin: 0 -15px 15px;
					padding: 0 15px 15px;
					border-bottom: 1px solid rgba(0,0,0,.14);
					box-shadow: 0 1px 0 rgba(255,255,255,.13);
					.title{
						font-weight: 700;
						font-size: 13px;
						padding: 5px 0;
						text-shadow:0 1px 0 rgba(0,0,0,.7);
					}
					&:last-child{
						margin-bottom: 0;
					}
				}
			}
		}
	}
}